<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花龙腾航 - 机票预订系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }
        input {
            color: black;
        }
        .hero-bg {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
        }
        
        .tab-active {
            border-bottom: 3px solid #3b82f6;
            color: #3b82f6;
            font-weight: 500;
        }
        
        .search-box {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .logo-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .user-avatar {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            min-width: 200px;
            z-index: 10;
        }
        
        .dropdown-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .dropdown-item:hover {
            background-color: #f3f4f6;
        }
        
        .flight-card {
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        .flight-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .price-tag {
            position: relative;
            overflow: hidden;
        }
        
        .price-tag::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
            z-index: -1;
        }
        
        .best-price {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #ef4444;
            color: white;
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            transform: rotate(15deg);
        }
        
        .date-picker input {
            padding-right: 2.5rem;
        }
        
        .date-picker i {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #6b7280;
        }
        
        .search-box i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }
        
        .cabin-selector select {
            appearance: none;
            padding-right: 2.5rem;
        }
        
        .cabin-selector i {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #6b7280;
        }
        
        .flight-time {
            position: relative;
        }
        
        .flight-time::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background-color: #e5e7eb;
        }
        
        .flight-duration {
            position: relative;
        }
        
        .flight-duration::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #e5e7eb;
            z-index: -1;
        }
        
        /* 新增样式 */
        .sort-btn.active {
            background-color: #3b82f6;
            color: white;
        }
        
        .filter-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            z-index: 10;
            min-width: 200px;
            padding: 1rem;
        }
        
        .filter-dropdown.show {
            display: block;
        }
        
        .filter-item {
            margin-bottom: 0.75rem;
        }
        
        .filter-item:last-child {
            margin-bottom: 0;
        }
        
        .filter-section {
            margin-bottom: 1rem;
        }
        
        .filter-section:last-child {
            margin-bottom: 0;
        }
        
        .filter-section-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #374151;
        }
        
        .filter-checkbox {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .filter-checkbox input {
            margin-right: 0.5rem;
        }
        
        .filter-checkbox-label {
            font-size: 0.875rem;
            color: #4b5563;
        }
        
        .filter-reset {
            color: #3b82f6;
            font-size: 0.875rem;
            cursor: pointer;
            margin-top: 0.5rem;
            display: inline-block;
        }
        
        .filter-badge {
            background-color: #3b82f6;
            color: white;
            border-radius: 9999px;
            font-size: 0.75rem;
            padding: 0.125rem 0.5rem;
            margin-left: 0.25rem;
        }
        
        .hidden-flight {
            display: none;
        }
        
        /* 新增分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }
        
        .page-item {
            margin: 0 0.25rem;
        }
        
        .page-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.375rem;
            background-color: white;
            border: 1px solid #e5e7eb;
            color: #4b5563;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .page-link:hover {
            background-color: #f3f4f6;
            color: #3b82f6;
        }
        
        .page-link.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        .page-link.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        
        .per-page-selector {
            display: flex;
            align-items: center;
            margin-left: 1rem;
        }
        
        .per-page-selector select {
            margin-left: 0.5rem;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            border: 1px solid #e5e7eb;
        }
        
        /* 无结果提示样式 */
        .no-results {
            text-align: center;
            padding: 3rem;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        .no-results i {
            font-size: 3rem;
            color: #9ca3af;
            margin-bottom: 1rem;
        }
        
        .no-results h3 {
            font-size: 1.25rem;
            color: #374151;
            margin-bottom: 0.5rem;
        }
        
        .no-results p {
            color: #6b7280;
            margin-bottom: 1.5rem;
        }
        
        /* 航班详情样式 */
        .flight-details {
            display: none;
            padding: 1rem;
            background-color: #f9fafb;
            border-top: 1px solid #e5e7eb;
        }
        
        .flight-details.show {
            display: block;
        }
        
        .details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
        }
        
        .detail-item {
            padding: 0.5rem;
        }
        
        .detail-label {
            font-size: 0.75rem;
            color: #6b7280;
            margin-bottom: 0.25rem;
        }
        
        .detail-value {
            font-weight: 500;
            color: #111827;
        }
        
        /* 新增的航班详情按钮样式 */
        .details-btn {
            cursor: pointer;
        }
        /* 航程选择器样式 */
        .leg-selector {
            display: flex;
            margin-bottom: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .leg-tab {
            padding: 0.75rem 1.5rem;
            cursor: pointer;
            position: relative;
            font-weight: 500;
            color: #6b7280;
        }

        .leg-tab.active {
            color: #3b82f6;
        }

        .leg-tab.active::after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #3b82f6;
        }
        /* 往返行程指示器 */
        .journey-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            padding: 0.5rem;
            background-color: #f3f4f6;
            border-radius: 0.5rem;
        }

        .journey-step {
            display: flex;
            align-items: center;
            position: relative;
            padding: 0 1rem;
        }

        .journey-step:not(:last-child)::after {
            content: "→";
            position: absolute;
            right: -0.5rem;
            color: #6b7280;
        }

        .journey-city {
            font-weight: 500;
            color: #3b82f6;
        }

        .journey-date {
            font-size: 0.75rem;
            color: #6b7280;
            margin-left: 0.5rem;
        }
    </style>
</head>
<body>
<!-- Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fas fa-plane text-3xl text-blue-500"></i>
            <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
        </div>
        <nav class="hidden md:flex space-x-6">
            <a href="manager_index1" class="text-gray-600 hover:text-blue-500">主页</a>
            <a href="manager_flight_search1" class="text-blue-500 font-medium">航班查询</a>
            <a href="manager_order" class="text-gray-600 hover:text-blue-500">订单管理</a>
            <a href="manager_flight" class="text-gray-600 hover:text-blue-500">航班管理</a>
            <a href="manager_report" class="text-gray-600 hover:text-blue-500">报表统计</a>
        </nav>
        <div class="flex items-center space-x-4">
            <div class="relative">
                <i class="fas fa-bell text-gray-500 text-xl cursor-pointer hover:text-blue-500"></i>
                <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
            </div>
            <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
                <div class="h-8 w-8 rounded-full user-avatar flex items-center justify-center text-white">
                    <i class="fas fa-user-shield"></i>
                </div>
                <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${managername}">管理员</span>
                <div class="dropdown-menu" id="dropdown-menu">
                    <div class="border-t border-gray-200 my-1"></div>
                    <div class="dropdown-item text-red-500" onclick="location.href='manager_logout'">
                        <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Hero Section with Search -->
<div class="hero-bg py-16 md:py-24 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">探索世界，从花龙腾航开始</h1>
            <p class="text-xl md:text-2xl mb-8">享受舒适旅程，体验尊贵服务</p>
        </div>

        <!-- Search Box -->
        <form action="manager_flight_search2_1" method="get" class="bg-white rounded-lg p-6 search-box max-w-4xl mx-auto mt-8">
            <div class="flex border-b">
                <a href="manager_flight_search1" id="one-way" class="px-4 py-2 font-medium text-gray-500">单程</a>
                <button type="button" id="round-trip" class="px-4 py-2 font-medium tab-active">往返</button>
                <a href="manager_flight_search3_1" id="multi-city" class="px-4 py-2 font-medium text-gray-500">多程</a>
            </div>

            <!-- Round Trip Form -->
            <div id="round-trip-form" class="mt-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发城市</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="text"
                                        name="roundDepartureCity"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                        th:attr="placeholder=${roundDepartureCity}"
                                        required
                                >
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">到达城市</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="text"
                                        name="roundArrivalCity"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                        th:attr="placeholder=${roundArrivalCity}"
                                        required
                                >
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发日期</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="date"
                                        name="roundDepartureDate"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-black appearance-none"
                                        required
                                >
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">返回日期</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="date"
                                        name="roundReturnDate"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-black appearance-none"
                                        required
                                >
                            </label>
                        </div>
                    </div>
                </div>
            </div>


            <div class="mt-6 flex justify-center">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300 flex items-center">
                    查询航班
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
    <div class="journey-indicator">
        <div class="journey-step">
            <span class="journey-city" th:text="${roundDepartureCity}">北京</span>
            <span class="journey-date" th:text="${roundDepartureDate}">11月20日</span>
        </div>
        <div class="journey-step">
            <span class="journey-city" th:text="${roundArrivalCity}">上海</span>
            <span class="journey-date" th:text="${roundDepartureDate}">11月20日</span>
        </div>
        <div class="journey-step">
            <span class="journey-city" th:text="${roundArrivalCity}">上海</span>
            <span class="journey-date" th:text="${roundReturnDate}">11月25日</span>
        </div>
        <div class="journey-step">
            <span class="journey-city" th:text="${roundDepartureCity}">北京</span>
            <span class="journey-date" th:text="${roundReturnDate}">11月25日</span>
        </div>
    </div>
    <!-- Sorting and Filtering -->
    <p th:if="${no_round_arrival}" style="color: green; font-size: 1.0em; margin-top: 0.5em;" th:text="${roundArrivalCity}+'暂无机场，已为您查询临近城市的航班！'">目的地暂无机场，已为您查询临近城市的航班！</p>
    <p th:if="${no_round_departure}" style="color: green; font-size: 1.0em; margin-top: 0.5em;" th:text="${roundDepartureCity}+'暂无机场，已为您查询临近城市的航班！'">出发地暂无机场，已为您查询临近城市的航班！</p>
    <p th:if="${no_departure_arrival}" style="color: green; font-size: 1.0em; margin-top: 0.5em;" th:text="${roundArrivalCity}+'和'+${roundDepartureCity}+'暂无机场，已为您查询临近城市的航班！'">出发地和目的地暂无机场，已为您查询临近城市的航班！</p>
    <!-- 航程选择器 -->
    <div class="leg-selector">
        <a class="leg-tab" th:href="'manager_flight_search2_1?roundDepartureCity='+${roundDepartureCity}+'&roundArrivalCity='+${roundArrivalCity}+'&roundDepartureDate='+${roundDepartureDate}+'&roundReturnDate='+${roundReturnDate}">
            <span th:text="'去程: ' + ${roundDepartureCity} + ' → ' + ${roundArrivalCity}">去程: 北京 → 上海</span>
        </a>
        <a class="leg-tab active">
            <span th:text="'返程: ' + ${roundArrivalCity} + ' → ' + ${roundDepartureCity}">返程: 上海 → 北京</span>
        </a>
    </div>
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div class="flex items-center space-x-4">
                <span class="text-gray-700">排序方式:</span>
                <div class="flex space-x-2 overflow-x-auto">
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium sort-btn active" data-sort="recommended">推荐</button>
                    <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg sort-btn" data-sort="departure">起飞时间</button>
                    <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg sort-btn" data-sort="arrival">到达时间</button>
                    <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg sort-btn" data-sort="price-low">价格从低到高</button>
                    <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg sort-btn" data-sort="price-high">价格从高到低</button>
                    <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg sort-btn" data-sort="duration">飞行时长</button>
                </div>
            </div>
            <div class="flex items-center space-x-2 relative">
                <button id="filterBtn" class="px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 hover:bg-gray-50 flex items-center">
                    <i class="fas fa-filter mr-2"></i> 筛选
                    <span id="filterBadge" class="filter-badge hidden">0</span>
                </button>

                <!-- Filter Dropdown -->
                <div id="filterDropdown" class="filter-dropdown">
                    <div class="filter-section">
                        <h4 class="filter-section-title">起飞时段</h4>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="time-filter" value="00:00-06:00">
                                <span class="filter-checkbox-label">00:00-06:00</span>
                            </label>
                        </div>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="time-filter" value="06:00-12:00">
                                <span class="filter-checkbox-label">06:00-12:00</span>
                            </label>
                        </div>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="time-filter" value="12:00-18:00">
                                <span class="filter-checkbox-label">12:00-18:00</span>
                            </label>
                        </div>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="time-filter" value="18:00-24:00">
                                <span class="filter-checkbox-label">18:00-24:00</span>
                            </label>
                        </div>
                    </div>

                    <div class="filter-section">
                        <h4 class="filter-section-title">航空公司</h4>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="airline-filter" value="中国国际航空">
                                <span class="filter-checkbox-label">中国国际航空公司</span>
                            </label>
                        </div>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="airline-filter" value="东方航空">
                                <span class="filter-checkbox-label">东方航空公司</span>
                            </label>
                        </div>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="airline-filter" value="南方航空">
                                <span class="filter-checkbox-label">南方航空公司</span>
                            </label>
                        </div>
                    </div>

                    <div class="filter-section">
                        <h4 class="filter-section-title">其他选项</h4>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="other-filter" value="wifi" id="filterFreeWifi">
                                <span class="filter-checkbox-label">免费WiFi</span>
                            </label>
                        </div>
                        <div class="filter-item">
                            <label class="filter-checkbox">
                                <input type="checkbox" class="other-filter" value="meal" id="filterFreeMeal">
                                <span class="filter-checkbox-label">免费餐食</span>
                            </label>
                        </div>
                    </div>

                    <div class="flex justify-between items-center mt-4">
                        <span id="filterReset" class="filter-reset">重置筛选</span>
                        <button id="applyFilters" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm">应用筛选</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Flight List -->
    <div id="flight-list-container">
        <div class="space-y-4" id="flight-list" th:each="flight : ${flightdetails2}">
            <!-- Flight 1 -->
            <div class="flight-card bg-white rounded-xl shadow-sm overflow-hidden fade-in"
                 th:data-departure="${flight.getDeparture_time()}"
                 th:data-arrival="${flight.getArrival_time()}"
                 th:data-duration="${flight.getDuration()}"
                 th:data-price="${flight.getEconomy_price()}"
                 th:data-airline="${flight.getF_airline()}"
                 th:data-wifi="${flight.getWiFi()}"
                 th:data-meal="true">
                <div class="p-6">
                    <div class="flex flex-col md:flex-row justify-between gap-6">
                        <!-- Airline Info -->
                        <div class="flex-1">
                            <div class="flex items-center space-x-3 mb-4">
                                <img th:src="'static/airline/'+${flight.getF_airline()}+'.jpg?version=' + ${#dates.createNow().time}" alt="花龙腾航" class="h-10 w-10 rounded-full">
                                <div>
                                    <h3 class="font-bold text-gray-800" th:text="${flight.getF_airline()}">花龙腾航</h3>
                                    <p class="text-sm text-gray-500" th:text="${flight.getFlight_id()}+' · '+${flight.getF_model()}">HL888 · 波音787-9</p>
                                </div>
                            </div>

                            <!-- Flight Times -->
                            <div class="grid grid-cols-3 gap-4">
                                <div class="text-center">
                                    <div class="text-xl font-bold" th:text="${flight.getDeparture_time()}">08:30</div>
                                    <div class="text-sm text-gray-500" th:text="${flight.getDeparture_date()}">11月20日</div>
                                    <div class="text-xs text-gray-500 mt-1" th:text="${flight.getDeparture_city()}">北京(PEK)</div>
                                </div>

                                <div class="text-center flight-time">
                                    <div class="text-sm text-gray-500 mb-6" th:text="${flight.getDuration()}">1小时45分钟</div>
                                    <div class="flight-duration px-4">
                                        <i class="fas fa-plane text-blue-500 bg-white px-2"></i>
                                    </div>
                                    <div class="text-xs text-blue-500 mt-6">直飞</div>
                                </div>

                                <div class="text-center">
                                    <div class="text-xl font-bold" th:text="${flight.getArrival_time()}">10:15</div>
                                    <div class="text-sm text-gray-500" th:text="${flight.getArrival_date()}">11月20日</div>
                                    <div class="text-xs text-gray-500 mt-1" th:text="${flight.getArrival_city()}">上海(SHA)</div>
                                </div>
                            </div>
                        </div>

                        <!-- Price and Action -->
                        <div class="md:w-48 flex flex-col items-end">
                            <div class="price-tag relative p-4 rounded-lg mb-4">
                                <!--span class="best-price">最低价</span-->
                                <div class="text-3xl font-bold text-blue-600" th:text="'¥'+${flight.getEconomy_price()}">¥1,280</div>
                                <div class="text-xs text-gray-500">经济舱</div>
                            </div>
                            <button class="mt-2 text-sm text-blue-500 hover:text-blue-700 flex items-center details-btn">
                                <i class="fas fa-info-circle mr-1"></i> 航班详情
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Flight Details -->
                <div class="flight-details">
                    <div class="details-grid">
                        <div class="detail-item">
                            <div class="detail-label">航班号</div>
                            <div class="detail-value" th:text="${flight.getFlight_id()}">HL888</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">机型</div>
                            <div class="detail-value" th:text="${flight.getP_model()}">波音787-9</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">机龄</div>
                            <div class="detail-value" th:text="${flight.getPlane_age()}">18</div>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-suitcase-rolling mr-1"></i>
                            <span class="detail-label">行李额度</span>
                            <div class="detail-value" th:text="'1件'+${flight.getBaggage_limit()}+'kg'">1件23kg</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">餐食</div>
                            <div class="detail-value" th:text="${flight.getMeal_money()}">免费餐食</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">WiFi</div>
                            <div class="detail-value" th:text="${flight.getWiFi()} == 'no' ? '暂无提供' : (${flight.getWiFi()} == 'true' ? '免费提供' : '付费使用')"></div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">登机口</div>
                            <div class="detail-value" th:text="${flight.getGate() != null} ? '登机口: ' + ${flight.getGate()} : '登机口: 待定'">B12</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">准点率</div>
                            <div class="detail-value">92%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- No Results Message (initially hidden) -->
        <div id="no-results" class="no-results hidden">
            <i class="fas fa-plane-slash"></i>
            <h3>没有找到符合筛选条件的机票</h3>
            <p>请尝试调整您的筛选条件或搜索其他日期</p>
            <button id="resetAllFilters" class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium transition duration-300">
                重置所有筛选条件
            </button>
        </div>

        <!-- Pagination -->
        <div class="flex flex-col md:flex-row justify-between items-center mt-8">
            <div class="per-page-selector mb-4 md:mb-0">
                <span class="text-sm text-gray-600">每页显示:</span>
                <select id="perPage" class="text-sm">
                    <option value="5">5条</option>
                    <option value="10" selected>10条</option>
                    <option value="20">20条</option>
                    <option value="50">50条</option>
                </select>
            </div>
                        
            <div class="pagination">
                <div class="page-item">
                    <a href="#" class="page-link" id="prevPage">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                </div>
                                
                <div class="page-item">
                    <a href="#" class="page-link active" data-page="1">1</a>
                </div>
                <div class="page-item">
                    <a href="#" class="page-link" data-page="2">2</a>
                </div>
                <div class="page-item">
                    <a href="#" class="page-link" data-page="3">3</a>
                </div>
                                
                <div class="page-item">
                    <a href="#" class="page-link" id="nextPage">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Footer -->
<footer class="bg-gray-50 mt-12">
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fas fa-plane text-2xl text-blue-500"></i>
                    <h3 class="text-xl font-bold logo-text">花龙腾航</h3>
                </div>
                <p class="text-gray-600 text-sm">花龙腾航，让您的每一次飞行都成为美好回忆。我们致力于提供安全、舒适、便捷的航空服务。</p>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">关于我们</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">公司简介</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">企业文化</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">发展历程</a></li>
                    <li><a href="public_job_posting" class="hover:text-blue-500 transition">招贤纳士</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">帮助中心</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li><a href="public_faq" class="hover:text-blue-500 transition">常见问题</a></li>
                    <li><a href="public_baggage_regulations" class="hover:text-blue-500 transition">行李规定</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">航班动态</a></li>
                    <li><a href="public_callus" class="hover:text-blue-500 transition">联系客服</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">联系我们</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-blue-500"></i> 客服热线: 19976338635</li>
                    <li class="flex items-center"><i class="fas fa-envelope mr-2 text-blue-500"></i> ganshenghao888@qq.com</li>
                    <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> 广东省广州市天河区华南农业大学</li>
                </ul>
                <div class="flex space-x-4 mt-4">
                    <a href="https://weixin.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-weixin"></i>
                    </a>
                    <a href="https://weibo.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-weibo"></i>
                    </a>
                    <a href="https://qq.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-qq"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
            <p>© 2025 花龙腾航航空公司 版权所有 | 京ICP备12345678号</p>
        </div>
    </div>
</footer>

<script>
    // Tab switching functionality
    const tabs = document.querySelectorAll('.flex.border-b button');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // Remove active class from all tabs
            tabs.forEach(t => t.classList.remove('tab-active'));
            tabs.forEach(t => t.classList.add('text-gray-500'));
                        
            // Add active class to clicked tab
            tab.classList.add('tab-active');
            tab.classList.remove('text-gray-500');
        });
    });
        
    // Simple flight search form validation
    document.querySelector('button[type="submit"]').addEventListener('click', (e) => {
        const from = document.querySelector('input[placeholder="北京"]').value;
        const to = document.querySelector('input[placeholder="上海"]').value;
        const date = document.querySelector('input[type="date"]').value;
        
        if (!from || !to || !date) {
            e.preventDefault();
            alert('请填写完整的查询信息！');
        }
    });
        
    // Flight card hover effect
    const flightCards = document.querySelectorAll('.flight-card');
    
    flightCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-5px)';
            card.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.15)';
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = '';
            card.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        });
    });
        
    // Toggle user dropdown menu
    document.getElementById('user-menu').addEventListener('click', function(event) {
        event.stopPropagation(); // 防止点击事件冒泡
        document.getElementById('dropdown-menu').classList.toggle('open');
    });
        
    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('dropdown-menu');
        const userMenu = document.getElementById('user-menu');
        
        if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
            dropdown.classList.remove('open');
        }
    });

    // 航班详情显示/隐藏功能
    document.addEventListener('DOMContentLoaded', function() {
        // 为所有"航班详情"按钮添加点击事件
        document.querySelectorAll('.details-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const flightCard = this.closest('.flight-card');
                const details = flightCard.querySelector('.flight-details');
                const icon = this.querySelector('i');
                
                // 切换显示状态
                details.classList.toggle('show');
                
                // 切换图标和文本
                if (details.classList.contains('show')) {
                    icon.classList.remove('fa-info-circle');
                    icon.classList.add('fa-times');
                    this.innerHTML = '<i class="fas fa-times mr-1"></i> 关闭详情';
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-info-circle');
                    this.innerHTML = '<i class="fas fa-info-circle mr-1"></i> 航班详情';
                }
            });
        });
        
        // 排序功能
        const sortButtons = document.querySelectorAll('.sort-btn');
        sortButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                sortButtons.forEach(btn => btn.classList.remove('active', 'bg-blue-600', 'text-white'));
                
                // Add active class to clicked button
                this.classList.add('active', 'bg-blue-600', 'text-white');
                
                // Get the sort type
                const sortType = this.getAttribute('data-sort');
                
                // Sort flights
                sortFlights(sortType);
            });
        });
        
        // 筛选功能
        const filterBtn = document.getElementById('filterBtn');
        const filterDropdown = document.getElementById('filterDropdown');
        const applyFilters = document.getElementById('applyFilters');
        const filterReset = document.getElementById('filterReset');
        const filterBadge = document.getElementById('filterBadge');
        const resetAllFilters = document.getElementById('resetAllFilters');
        
        // Toggle filter dropdown
        filterBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            filterDropdown.classList.toggle('show');
        });
        
        // Close dropdown when clicking outside
        document.addEventListener('click', function() {
            filterDropdown.classList.remove('show');
        });
        
        // Prevent dropdown from closing when clicking inside
        filterDropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
        // Apply filters
        applyFilters.addEventListener('click', function() {
            filterDropdown.classList.remove('show');
            applyFiltersToFlights();
            updateFilterBadge();
            updatePagination();
        });
        
        // Reset filters
        filterReset.addEventListener('click', function() {
            document.querySelectorAll('.filter-dropdown input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = false;
            });
            applyFiltersToFlights();
            updateFilterBadge();
            updatePagination();
        });
        
        // Reset all filters button
        resetAllFilters.addEventListener('click', function() {
            document.querySelectorAll('.filter-dropdown input[type="checkbox"]').forEach(checkbox => {
                checkbox.checked = false;
            });
            applyFiltersToFlights();
            updateFilterBadge();
            updatePagination();
        });
        
        // Function to update filter badge count
        function updateFilterBadge() {
            const checkedCount = document.querySelectorAll('.filter-dropdown input[type="checkbox"]:checked').length;
            if (checkedCount > 0) {
                filterBadge.textContent = checkedCount;
                filterBadge.classList.remove('hidden');
            } else {
                filterBadge.classList.add('hidden');
            }
        }
        
        // Function to apply filters to flights
        function applyFiltersToFlights() {
            // Get selected filters
            const selectedTimes = Array.from(document.querySelectorAll('.time-filter:checked')).map(el => el.value);
            const selectedAirlines = Array.from(document.querySelectorAll('.airline-filter:checked')).map(el => el.value);
            const freeWifi = document.getElementById('filterFreeWifi').checked;
            const freeMeal = document.getElementById('filterFreeMeal').checked;
            
            let visibleCount = 0;
            
            // Show all flights first
            document.querySelectorAll('.flight-card').forEach(flight => {
                flight.classList.remove('hidden-flight');
            });
            
            // Apply filters
            document.querySelectorAll('.flight-card').forEach(flight => {
                let shouldHide = false;
                
                // Time filter
                if (selectedTimes.length > 0) {
                    const departureTime = flight.getAttribute('data-departure');
                    let timeMatch = false;
                    
                    selectedTimes.forEach(timeRange => {
                        const [start, end] = timeRange.split('-');
                        const startHour = parseInt(start.split(':')[0]);
                        const endHour = parseInt(end.split(':')[0]);
                        const flightHour = parseInt(departureTime.split(':')[0]);
                        
                        if (flightHour >= startHour && flightHour < endHour) {
                            timeMatch = true;
                        }
                    });
                    
                    if (!timeMatch) {
                        shouldHide = true;
                    }
                }
                
                // Airline filter
                if (selectedAirlines.length > 0 && !shouldHide) {
                    const airline = flight.getAttribute('data-airline');
                    if (!selectedAirlines.includes(airline)) {
                        shouldHide = true;
                    }
                }
                
                // Free WiFi filter
                if (freeWifi && !shouldHide) {
                    const hasWifi = flight.getAttribute('data-wifi') === 'true';
                    if (!hasWifi) {
                        shouldHide = true;
                    }
                }
                
                // Free meal filter
                if (freeMeal && !shouldHide) {
                    const hasMeal = flight.getAttribute('data-meal') === 'true';
                    if (!hasMeal) {
                        shouldHide = true;
                    }
                }
                
                if (shouldHide) {
                    flight.classList.add('hidden-flight');
                } else {
                    visibleCount++;
                }
            });
            
            // Show no results message if no flights match filters
            const noResults = document.getElementById('no-results');
            if (visibleCount === 0) {
                noResults.classList.remove('hidden');
            } else {
                noResults.classList.add('hidden');
            }
            
            // Reset to first page when filters change
            currentPage = 1;
        }
        
        // Function to sort flights
        function sortFlights(sortType) {
            const flightList = document.getElementById('flight-list');
            const flights = Array.from(document.querySelectorAll('.flight-card:not(.hidden-flight)'));
            
            flights.sort((a, b) => {
                switch(sortType) {
                    case 'recommended':
                        // 推荐排序 - 综合考虑价格和时间
                        const priceA = parseInt(a.getAttribute('data-price'));
                        const priceB = parseInt(b.getAttribute('data-price'));
                        const durationA = parseInt(a.getAttribute('data-duration'));
                        const durationB = parseInt(b.getAttribute('data-duration'));
                        
                        // 计算综合评分 (价格权重60%，时间权重40%)
                        const scoreA = (0.6 * (1 - priceA / 10000)) + (0.4 * (1 - durationA / 500));
                        const scoreB = (0.6 * (1 - priceB / 10000)) + (0.4 * (1 - durationB / 500));
                        
                        return scoreB - scoreA;
                        
                    case 'departure':
                        // 按起飞时间排序
                        const departA = a.getAttribute('data-departure');
                        const departB = b.getAttribute('data-departure');
                        return departA.localeCompare(departB);
                        
                    case 'arrival':
                        // 按到达时间排序
                        const arrivalA = a.getAttribute('data-arrival');
                        const arrivalB = b.getAttribute('data-arrival');
                        return arrivalA.localeCompare(arrivalB);
                        
                    case 'price-low':
                        // 按价格从低到高排序
                        const priceLowA = parseInt(a.getAttribute('data-price'));
                        const priceLowB = parseInt(b.getAttribute('data-price'));
                        return priceLowA - priceLowB;
                        
                    case 'price-high':
                        // 按价格从高到低排序
                        const priceHighA = parseInt(a.getAttribute('data-price'));
                        const priceHighB = parseInt(b.getAttribute('data-price'));
                        return priceHighB - priceHighA;
                        
                    case 'duration':
                        // 按飞行时长排序
                        const durationSortA = parseInt(a.getAttribute('data-duration'));
                        const durationSortB = parseInt(b.getAttribute('data-duration'));
                        return durationSortA - durationSortB;
                        
                    default:
                        return 0;
                }
            });
            
            // Re-append sorted flights
            flights.forEach(flight => {
                flightList.appendChild(flight);
            });
            
            // Update pagination after sorting
            updatePagination();
        }
        
        // 分页功能
        let currentPage = 1;
        let perPage = 10;
        
        // 每页显示数量变化
        document.getElementById('perPage').addEventListener('change', function() {
            perPage = parseInt(this.value);
            currentPage = 1;
            updatePagination();
        });
        
        // 上一页按钮
        document.getElementById('prevPage').addEventListener('click', function(e) {
            e.preventDefault();
            if (currentPage > 1) {
                currentPage--;
                updatePagination();
            }
        });
        
        // 下一页按钮
        document.getElementById('nextPage').addEventListener('click', function(e) {
            e.preventDefault();
            const totalPages = Math.ceil(document.querySelectorAll('.flight-card:not(.hidden-flight)').length / perPage);
            if (currentPage < totalPages) {
                currentPage++;
                updatePagination();
            }
        });
        
        // 页码按钮点击
        document.querySelectorAll('.page-link[data-page]').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                currentPage = parseInt(this.getAttribute('data-page'));
                updatePagination();
            });
        });
        
        // 更新分页状态
        function updatePagination() {
            const allFlights = Array.from(document.querySelectorAll('.flight-card:not(.hidden-flight)'));
            const totalFlights = allFlights.length;
            const totalPages = Math.ceil(totalFlights / perPage);
            
            // 隐藏所有航班
            document.querySelectorAll('.flight-card').forEach(flight => {
                flight.style.display = 'none';
            });
            
            // 显示当前页的航班
            const startIndex = (currentPage - 1) * perPage;
            const endIndex = Math.min(startIndex + perPage, totalFlights);
            
            for (let i = startIndex; i < endIndex; i++) {
                if (allFlights[i]) {
                    allFlights[i].style.display = '';
                }
            }
            
            // 更新分页按钮状态
            updatePaginationButtons(totalPages);
            
            // 如果没有航班显示"无结果"消息
            const noResults = document.getElementById('no-results');
            if (totalFlights === 0) {
                noResults.classList.remove('hidden');
            } else {
                noResults.classList.add('hidden');
            }
        }
        
        // 更新分页按钮状态
        function updatePaginationButtons(totalPages) {
            const prevPageBtn = document.getElementById('prevPage');
            const nextPageBtn = document.getElementById('nextPage');
            const pageLinks = document.querySelectorAll('.page-link[data-page]');
            
            // 更新上一页按钮状态
            if (currentPage === 1) {
                prevPageBtn.classList.add('disabled');
            } else {
                prevPageBtn.classList.remove('disabled');
            }
            
            // 更新下一页按钮状态
            if (currentPage === totalPages || totalPages === 0) {
                nextPageBtn.classList.add('disabled');
            } else {
                nextPageBtn.classList.remove('disabled');
            }
            
            // 更新页码按钮
            pageLinks.forEach(link => {
                link.classList.remove('active');
                if (parseInt(link.getAttribute('data-page')) === currentPage) {
                    link.classList.add('active');
                }
                
                // 隐藏不相关的页码按钮
                const pageNum = parseInt(link.getAttribute('data-page'));
                if (pageNum > totalPages) {
                    link.parentElement.style.display = 'none';
                } else {
                    link.parentElement.style.display = '';
                }
            });
        }
        
        // 初始化分页
        updatePagination();
    });
</script>
</body>
</html>